<template>
  <h2>watch监视toRefs数据</h2>
  <h3>count:{{count}}</h3>
  <h3>state1:{{ state1}}</h3>
  <h3>msg:{{msg}}</h3>
  <h3>user:{{user}}</h3>
  <h3>state1:{{ state2}}</h3>
  <button @click="updateData">更新数据</button>
</template>

<script lang="ts">
// 引入定义组件的api
import {defineComponent, reactive, ref, toRefs, watch} from "vue";
// 接口：可以理解为对象的类型，类的类型，函数的类型
// 接口：可以理解未是一种限制，或者是一种能力，一种约束
// 定义一个接口
  interface StateData {
    msg: string
    user: {
      name: string
    }
    cars: string[]
  }
  // 定义组件并暴漏
  export default defineComponent({
    name: "WatchToRefsDemo",
    setup() {
      // 定义ref类型的数据
      const count = ref(10)
      // watch监视一个ref数据
      watch(count, () =>{
        console.log('count数据变化了')
      })
      //定义reactive的响应式对象数据
      const state1:StateData = reactive({
        msg: '哈哈',
        user: {
          name: '小甜甜'
        },
        cars: ['奔驰','宝马','奥迪']
      })
      //watch监视一个reactive数据
      watch(state1,() => { // 自动开始深度监视
        console.log('state1数据变化了')
      })
      // watch监视一个函数返回值数据
      // watch(()=>state1.msg,() =>{
      //   console.log('state1数据变化了')
      // })
      const state2 = toRefs(state1)
      // watch监视多个数据
      /**
       * state2是基本类型对象数据，不是ref也不是reactive定义的响应式对象数据，
       但是state2.user.name修改的是state1中的数据，这个数据变化了，影响了state2对象中的数据，
       所以监视就有效的触发了
       */
      // 单独监视state2，监视是不会触发的
      watch([count,()=>state1.msg,state2],() =>{
        console.log('监视多个数据')
      })
      const updateData = () => {
        count.value +=10
        // 深度修改数据
        state1.msg+='==='
        state1.user.name+='---'
        state2.msg.value+='+++'
      }
      return {
        count,
        updateData,
        state1,
        ...state1,
        ...state2
      }
    }
  })
</script>

<style scoped>

</style>
